<template>
  <el-dialog
    :before-close="beforeClose"
    :visible.sync="show"
    :title="title"
    width="45%"
    @close="close"
    @closed="closed"
  >
    <el-form ref="myForm" label-width="100px" :model="form" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="楼宇名称" prop="name">
            <el-input
              v-model="form.name"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="辖区" prop="region_id">
            <jurisdiction-select
              v-model="form.region_id"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12"> <el-form-item label="注册地址" prop="address">
          <el-input
            v-model="form.address"
            type="text"
          />
        </el-form-item>
        </el-col>
        <el-col :span="12">

          <el-form-item label="状态">
            <BuildingStatusSelect v-model="form.status" />

          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="总建筑面积" prop="total_area">
            <el-input
              v-model="form.total_area"
              type="text"
            />
          </el-form-item></el-col>
        <el-col :span="12">
          <el-form-item label="商务面积" prop="business_area">
            <el-input
              v-model="form.business_area"
              type="text"
            />
          </el-form-item></el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="楼宇总高度">
            <el-input
              v-model="form.total_height"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12"> <el-form-item label="竣工年月" prop="over_time">
          <el-date-picker
            v-model="form.over_time"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开工年月" prop="begin_time">
            <el-date-picker
              v-model="form.begin_time"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            />

          </el-form-item></el-col>
        <el-col :span="12">
          <el-form-item label="投用年月" prop="use_time">
            <el-date-picker
              v-model="form.use_time"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            />

          </el-form-item></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"> <el-form-item label="地上层数">
          <el-input
            v-model="form.grounp_floor"
            type="number"
          />
        </el-form-item>
        </el-col>
        <el-col :span="12">  <el-form-item label="地上高度">
          <el-input
            v-model="form.ground_height"
            type="text"
          />
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="地下层数">
            <el-input
              v-model="form.undergrounp_floor"
              type="number"
            />
          </el-form-item></el-col>
        <el-col :span="12">
          <el-form-item label="地下高度">
            <el-input
              v-model="form.underground_height"
              type="text"
            />
          </el-form-item></el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车位数">
            <el-input
              v-model="form.carport_number"
              type="number"
            />
          </el-form-item></el-col>
        <el-col :span="12">
          <el-form-item label="车位租金">
            <el-input
              v-model="form.carport_cost"
              type="text"
            />
          </el-form-item></el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="物业公司">
            <el-input
              v-model="form.property_name"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物管等级">
            <el-input
              v-model="form.property_level"
              type="text"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="物业公司联系人">
            <el-input
              v-model="form.property_contact"
              type="text"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物业管理费">
            <el-input
              v-model="form.property_cost"
              type="text"
            />
          </el-form-item></el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系方式">
            <el-input
              v-model="form.property_phone"
              type="text"
            />

          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="楼宇简介">
            <el-input
              v-model="form.note"
              type="textarea"
              rows="5"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmitChek">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { ssqOptions, streetOptions, adminOptions } from '@/list/data'
import { buildingGet, buildingUpdate, buildingCreate } from '@/api/building'
import JurisdictionSelect from '@/components/Select/JurisdictionSelect'
import BuildingStatusSelect from '@/components/Select/BuildingStatusSelect'
export default {
  name: 'Index',
  components: { JurisdictionSelect, BuildingStatusSelect },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'view'
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      show: false,
      ssqOptions,
      streetOptions,
      adminOptions,
      form: {

      },
      rules: {
        region_id: [{ required: true, message: '请选择辖区', trigger: 'change' }],
        name: [{ required: true, message: '请输入楼宇名称', trigger: 'blur' }],
        address: [{ required: true, message: '请输入注册地址', trigger: 'blur' }],
        total_area: [{ required: true, message: '请输入建筑总面积', trigger: 'blur' }],
        business_area: [{ required: true, message: '请输入商用总面积', trigger: 'blur' }],
        over_time: [{ required: true, message: '请输入竣工年月', trigger: 'blur' }],
        use_time: [{ required: true, message: '请输入投用年月', trigger: 'blur' }],
        begin_time: [{ required: true, message: '请输入动工年月', trigger: 'blur' }]

      }
    }
  },
  computed: {
    title() {
      let text = ''
      switch (this.type) {
        case 'view':
          text = '查看'
          break
        case 'create':
          text = '新建'
          break
        case 'edit':
          text = '编辑'
          break
      }
      return text
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.show = val
        this.getData()
      }
    }
  },
  mounted() {
    this.show = this.visible
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    getData() {
      console.log('获取数据')
      if (this.data.id > 0) {
        buildingGet(this.data.id).then(res => {
          this.form = res.data
        })
      } else {
        this.form = {

          'status': 1, // 状态
          'total_area': '', // 总面积
          'business_area': '', // 商用面积
          'total_height': '', // 总高度
          'ground_height': '', // 地上高地
          'underground_height': '', // 地下高度
          'grounp_floor': 0, // 地上楼层
          'undergrounp_floor': 0, // 地下楼层
          'begin_time': '', // 动工时间
          'over_time': '', // 竣工时间
          'use_time': '', // 投用时间
          'property_name': '', // 物业公司名称
          'property_contact': '', // 物业公司联系人
          'property_level': '', // 物管等级
          'property_cost': '', // 物管费用
          'property_phone': '', // 物管联系方式
          'carport_number': 0, // 车位数
          'carport_cost': '', // 车位金额
          'note': '' // 备注

        }
      }
    },
    handleClose() {
      console.log('点击关闭')
      this.beforeClose()
    },
    handleSubmitChek() {
      this.$refs['myForm'].validate((valid) => {
        if (valid) {
          this.handleSubmit()
        } else {
          return false
        }
      })
    },
    handleSubmit() {
      console.log('点击确定')
      if (this.form.id > 0) {
        buildingUpdate(this.form).then(res => {
          this.$notify.success('保存成功')
          this.handleClose()
        })
      } else {
        buildingCreate(this.form).then(res => {
          this.$notify.success('保存成功')
          this.handleClose()
        })
      }
      this.$emit('refresh')
      this.handleClose()
    },
    beforeClose() {
      console.log('关闭前的回调')
      this.show = false
      this.$nextTick(function() {
        this.$refs['myForm'].clearValidate()
      })
      this.$emit('update:visible', false)
    },
    close() {
      console.log('关闭的回调')
    },
    closed() {
      console.log('关闭动画结束后的回调')
    }
  }
}
</script>

<style scoped>
</style>
